<script setup>
import {computed,defineProps} from "vue";
import {formsOutCssMapping} from "@/components/constants";
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";

let theProps = defineProps(["label"])
let emits = defineEmits(["click"])

const styleObject = computed(() =>{
    let formPart = theProps.label.substring(0,theProps.label.lastIndexOf('.'));
    let theForm = formsOutCssMapping[formPart];
    return {"--color-default":`var(--color-`+theForm+`)`,
        "--color-default-bg-color":`var(--color-`+theForm+`-bg-color)`,
        "--color-default-clickdarker":`var(--color-`+theForm+`-clickdarker)`,
        "--color-default-bg-color-editing":`var(--color-`+theForm+`-bg-color-editing)`,
    }
})

</script>

<template>
  <el-button type="primary" class="formsCountBtn" :style="styleObject" @click="emits(`click`,label)">
      <CommonTagDisplay :label="label" />
  </el-button>
</template>

<style scoped>
.el-button.formsCountBtn{
    line-height: 8px;
    height: var(--common-tag-height);
    padding:7px 7px;
    margin: 2px 2px;
    font-weight: 520;
    --el-font-size-base: 12px;

    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: var(--color-default);
    --el-button-border-color: var(--color-default);
    --el-button-outline-color: var(--color-default-bg-color);
    --el-button-active-color: var(--color-default-clickdarker);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--color-default-bg-color);
    --el-button-hover-bg-color: var(--color-default-bg-color-editing);
    --el-button-hover-border-color: var(--color-default-bg-color-editing);
    --el-button-active-bg-color: var(--color-default-clickdarker);
    --el-button-active-border-color: var(--color-default-clickdarker);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--color-default-bg-color);
    --el-button-disabled-border-color: var(--color-default-bg-color);
    /*background-color: var(--el-button-bg-color);*/
    /*border-color: var(--el-button-border-color);*/
}

.formsCountBtn+.formsCountBtn {
    margin-left: 5px;
}
</style>